<template>
	<view class="full-page" v-if="totalPage">
		
	</view>
	<view class="content" v-else style="padding-bottom: 0!important;">
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back">
			<view slot="center">
				<view class="serbox">
					<image :src="'/images/search.png' | formatImgUrl" class="serpic" mode=""></image>
					<input type="text" class="serput" placeholder="搜索需要的文章类型" v-model="like" @input='onSearch' style="width: 500rpx;">
				</view>
			</view>
		</u-navbar>
		<!-- 10.16新增 筛选 -->
		<view class="fix-top">
			<!-- <view class="serbox">
				<image :src="'/images/search.png' | formatImgUrl" class="serpic" mode=""></image>
				<input type="text" class="serput"  placeholder="搜索需要的文章类型" v-model="like" @input='onSearch'>
			</view> -->

			<scroll-view class="head_list" scroll-x="true"  :scroll-into-view="viewId" >
				<view :id="'view' + i" :class="item.id==currentNew?'item active':'item' " v-for="(item,i) in headList" :key="i"
					@click="changeItem(item.id)">
					<image :src="item.url | formatImgUrl" mode=""></image>
					<text class="text">{{item.tit}}</text>
				</view>
			</scroll-view>

			<view class="filter-box">
				<fy-dropdown :menuList="menuList" ref="frd">
					<fy-dropdown-item v-model="synthesisValue" dropdownKey="synthesis" current="0" currentType='2' :options="columnOptions"
						type="column" @change="handlerColumnChange($event,1)" @onFinish='onFinish'></fy-dropdown-item>
					<fy-dropdown-item v-model="priceValue" dropdownKey="price" currentType='2' current="1" :options="priceOptions" type="column"
						@change="handlerColumnChange($event,2)" @onFinish='onFinish'></fy-dropdown-item>
					<fy-dropdown-item v-model="salesValue" dropdownKey="sales" currentType='2' current="2" :options="salesOptions" type="column"
						@change="handlerColumnChange($event,3)" @onFinish='onFinish'></fy-dropdown-item>
					<fy-dropdown-item v-model="totalValue" dropdownKey="total" currentType='2' current="3" :options="totalOptions" type="column"
						@change="handlerColumnChange($event,4)" @onFinish='onFinish'></fy-dropdown-item>
				</fy-dropdown>
			</view>
		</view>



		<view class="empytView" v-if="goodList.length<=0">
			<image :src="'/images/kong.png' | formatImgUrl" mode="widthFix" />
			<!-- <view>- 空列表 -</view> -->
		</view>
		<view class="result_list" v-for="(item,index) in goodList"
			@click="$go('/showcase/showcase/datails?id='+item.id+'&type=0')">
			<view class="item">
				<view class="head">
					<image :src="headList[6].url | formatImgUrl " mode="" v-if="current == 8"></image>
					<image :src="headList[current].url | formatImgUrl " mode="" v-else></image>
					<view class="tit">
						{{item.title}}
					</view>


					<view class="tips" v-if="item.cnt > 1">
						近期好评
					</view>
				</view>

				<view class="wrap">
					<view class="wrap_item">
						<image :src="'/images/re_list1.png' | formatImgUrl" mode="">文章类型：</image>
						<text v-if="current == 8">{{headList[6].tit}}</text>
						<text v-else>{{headList[current].tit}}</text>
					</view>
					<view class="wrap_item">
						<image :src="'/images/re_list2.png' | formatImgUrl" mode="">起拍单数：</image>
						<text>{{item.start_shooting}} 单</text>
					</view>
					<view class="wrap_item">
						<image :src="'/images/re_list3.png' | formatImgUrl" mode="">用户评分：</image>
						<text>{{item.rank}} 分 <block v-if="item.rank_num">（{{item.rank_num || 0}}单）</block></text>
					</view>
					<view class="wrap_item">
						<image :src="'/images/re_list4.png' | formatImgUrl" mode="">费用标准：</image>
						<text>{{Number(item.price).toFixed(0)}}币/{{item.word_count}}</text>
					</view>
				</view>

				<view class="bottom">
					<view class="user" v-if="item.user">
						<image :src="item.user.pic | formatImgUrl" mode="" class="avatar"></image>
						
						
							<view>
								<view class="display-flex">
									<text>{{item.user.username}}</text>
									<image
										:src="$options.filters.formatImgUrl(item.user.writer_level.is_active?item.user.writer_level.level.image:item.user.writer_level.level.hide_img)"
										@click.stop="$go('/pages/user/grade?uid='+item.user.membe_id)" class="jipic" mode="aspectFit"
										v-if="item.user&&item.user.is_writer">
									</image>
									
									<image v-if="item.user&&item.user.user_level.is_active"
										:src="$options.filters.formatImgUrl(item.user.user_level.active_day>0?item.user.user_level.level.image:item.user.user_level.level.hide_img)"
										class="biepic" mode="aspectFit">
									</image>
								</view>
								
								<view class="onlines display-flex">
									<view class="dian" :class='item.user.is_line==1?"lines":"noline_str"'>
									</view>
									<view class="online" v-if="item.user.is_line==1" :class='item.user.is_line==1?"":"noline_str"'>
										当前在线
									</view>
									<view class="online" v-else style="color: #999;">
										{{item.user.line_time_str}}
									</view>
									
								</view>
							</view>
					
						
						
					</view>
					<view class="sub" @tap.stop="middleShow=true,info=item">
						去下单
					</view>
				</view>
			</view>
		</view>


		<!--  -->
		<u-popup :show="middleShow" mode="center" @close="middleShow = false">
			<view class="baibox" v-if="info">
				<image :src="info.user.pic | formatImgUrl" class="baihead" mode=""></image>
				<view class="nickname">
					{{info.user.username}}
			
				</view>
				<view class="xutxt" @click="switchBth = !switchBth">
					<image :src=" '/images/switch_icon.png' | formatImgUrl" mode=""></image>{{switchBth?'例文展示':'约文须知'}}
				</view>

				<!-- 约文须知 -->
				<scroll-view class="gexu" scroll-y="true" v-if="info.user.writer_user_config&&switchBth">
					<view class="geli" v-if="info.user.writer_user_config.personal_note">
						<view class="getitle">
							个人说明：
						</view>
						<view class="getxt">
							{{info.user.writer_user_config.personal_note}}
						</view>
					</view>
					<view class="geli" v-if="info.user.writer_user_config.communication_time">
						<view class="getitle">
							沟通时间：
						</view>
						<view class="getxt">
							{{info.user.writer_user_config.communication_time}}
						</view>
					</view>
					<view class="geli" v-if="info.user.writer_user_config.remuneration_details">
						<view class="getitle">
							价格明细：
						</view>
						<view class="getxt">
							{{info.user.writer_user_config.remuneration_details}}
						</view>
					</view>
					<view class="geli" v-if="info.user.writer_user_config.order_notice">
						<view class="getitle">
							下单须知：
						</view>
						<view class="getxt">
							{{info.user.writer_user_config.order_notice}}
						</view>
					</view>
					<view class="geli" v-if="info.user.writer_user_config.publication_works">
						<view class="getitle">
							版权归属：
						</view>
						<view class="getxt">
							{{info.user.writer_user_config.publication_works}}
						</view>
					</view>
					<view class="geli" v-if="info.user.writer_user_config.additional_remarks">
						<view class="getitle">
							额外备注：
						</view>
						<view class="getxt">
							{{info.user.writer_user_config.additional_remarks}}
						</view>
					</view>
				</scroll-view>

				<!-- 立文展示 -->
				<scroll-view class="gexu" scroll-y="true" v-if="!switchBth">
					<div class="exhibit">
						<view class="item" v-for="(item,index) in info.imagrs_arr">
							<image :src="item | formatImgUrl" mode="aspectFill"
								@click="$common.previewImage(item,info.imagrs_arr)"></image>
						</view>
					</div>
					
				</scroll-view>
				<view class="geli" v-if="!switchBth">
					<view class="getxt" style="font-size: 24rpx;">
						以上为例文展示内容，仅做展示使用，请勿二次传播、修改、盗用。
					</view>
				</view>

				<view class="fabox" @click="$go('/pages/my/my?id='+info.uid)">
					<image :src="'/images/by.png' | formatImgUrl" class="fapic" mode=""></image>
					<view class="fatxt">
						查看主页
					</view>
				</view>

				<view class="fabox" @click="$go('/pages/my/place?id='+info.id)">
					<image :src="'/images/ji.png' | formatImgUrl" class="fapic" mode=""></image>
					<view class="fatxt">
						直接下单
					</view>
				</view>
			</view>
			<image :src="'/images/close.png' | formatImgUrl" @click="middleShow = false" class="closepic" mode="">
			</image>
		</u-popup>
		
		<!-- <dLoading :status="loading"></dLoading> -->
	</view>
</template>

<script>
	import fyDropdown from "@/components/fy-dropdown/fy-dropdown.vue"
	import fyDropdownItem from "@/components/fy-dropdown-item/fy-dropdown-item.vue"
	export default {
		data() {
			return {
				headList: [{
						img: '/images/reserve_icon1.png',
						text: '商用'
					},
					{
						img: '/images/reserve_icon2.png',
						text: '推文'
					},
					{
						img: '/images/reserve_icon3.png',
						text: '剧本'
					},
					{
						img: '/images/reserve_icon4.png',
						text: '宣发'
					},
					{
						img: '/images/reserve_icon5.png',
						text: '写作'
					},
					{
						img: '/images/reserve_icon6.png',
						text: '定制'
					},
				],
				current: 0,
				middleShow: false,
				userInfo: {},
				switchBth: true,
				page: 1,
				list: {},
				goodList: [],
				info: null,

				menuList: [{
					title: '精准筛选',
					isSelected: false,
					dropdownKey: 'synthesis'
				}, {
					title: '起拍单数',
					isSelected: false,
					dropdownKey: 'price'
				}, {
					title: '价格范围',
					isSelected: false,
					dropdownKey: 'sales'
				}, {
					title: '综合排序',
					isSelected: true,
					dropdownKey: 'total'
				}],
				synthesisValue: '',
				columnOptions: [],
				priceValue: '',
				priceOptions: [{
					title: '起拍单数',
					key: 'type',
					default: '',
					tip: 'multi',
					list: [{
						text: '5单以下',
						selected: false,
						value: ''
					}, {
						text: '5-10单起拍',
						selected: false,
						value: '1'
					}, {
						text: '11-15单起拍',
						selected: false,
						value: '2'
					}, {
						text: '16-20单起拍',
						selected: false,
						value: '3'
					}, {
						text: '20单以上',
						selected: false,
						value: '4'
					}]
				}],
				salesValue: '',
				salesOptions: [
					{
						title: '价格单位',
						key: 'type',
						default: '',
						tip: 'single',
						list: [{						text: '十字',						selected: true,						value: '0'					}, {						text: '百字',						selected: false,						value: '1'					}, {						text: '千字',						selected: false,						value: '2'					}, {						text: '万字',						selected: false,						value: '3'					}, {						text: '十万字',						selected: false,						value: '4'					}, {						text: '百万字',						selected: false,						value: '5'					}]
					},
					
					{
					title: '价格范围',
					key: 'type',
					default: '',
					tip: 'multi',
					list: [{
						text: '50以下',
						selected: false,
						value: ''
					}, {
						text: '50-100',
						selected: false,
						value: '1'
					}, {
						text: '100-500',
						selected: false,
						value: '2'
					}, {
						text: '500-1000',
						selected: false,
						value: '3'
					}, {
						text: '1000-2000',
						selected: false,
						value: '4'
					}, {
						text: '2000-5000',
						selected: false,
						value: '5'
					}, {
						text: '5000以上',
						selected: false,
						value: '6'
					}]
				}],
				totalValue: '',
				totalOptions: [{
					title: '排序方式',
					key: 'type',
					default: '',
					tip: 'single',
					list: [{
						text: '正序',
						selected: true,
						value: ''
					}, {
						text: '倒序',
						selected: false,
						value: '1'
					}]
				}, {
					title: '排序类型',
					key: 'type',
					default: '',
					tip: 'single',
					list: [{
						text: '综合排序',
						selected: true,
						value: ''
					}, {
						text: '价格排序',
						selected: false,
						value: '1'
					}, {
						text: '评价排序',
						selected: false,
						value: '2'
					}]
				}],
				pid: '',
				like: '',
				loading: '',
				totalPage: true,
				viewId: '',
				currentNew: ''
			}
		},
		components: {
			fyDropdown,
			fyDropdownItem
		},
		onShow() {
			this.viewId = ''
			console.log(this.$db.get('nav_id'));
			if(this.$db.get('nav_id')){
				this.currentNew = this.$db.get('nav_id')
				this.current = this.$db.get('nav_id')
			}
		},
		onLoad(e) {
			
			this.getList()
			
			this.getListType()
			this.getCustom()
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh(); //停止当前页面下拉刷新	
			}, 800);
			this.page = 1;
			this.list = [];
			this.getList()
		},
		// 上拉加载
		onReachBottom() {
			if (this.list.current_page < this.list.last_page) {
				this.page++; // 页数加一，加载下一页数据
				this.getList();
			}
		},
		methods: {
			// 获取量词
			getCustom(){
				// 0共计字数 1起拍单价
				let that = this;
				this.$api.default.request('index/getQuantifier', {
					type: 0
				}, 'POST', false).then((res) => {
					let headList = res.data
					let list = []
					headList.forEach((ite,idx)=>{
						list.push({
							text: ite.title,
							selected: false,
							value: ite.id
						})
					})
					
					this.priceOptions[0].list = list
				})
				
				this.$api.default.request('index/getQuantifier', {
					type: 1
				}, 'POST', false).then((res) => {
					let headList = res.data
					let list = []
					headList.forEach((ite,idx)=>{
						list.push({
							text: ite.title,
							selected: false,
							value: ite.id
						})
					})
					
					this.salesOptions[1].list = list
				})
			},
			// 搜索框
			onSearch(){
				this.page = 1;
				this.list = [];
				this.getList()
			},
			onFinish(data){
				// if (data.cancel) {
				// 	this.menuList[data.value].isSelected = false
				// };
				
				let filterArr = []
				data.data[0].list.filter(item => item.selected).map(item => {
					filterArr.push(item)
				});
				
				this.$nextTick(()=>{
					this.menuList[data.value].isSelected = filterArr.length ? true : false
				})
				
				if(data.value == 0){
					this.columnOptions = data.data	
				}else if(data.value == 1){
					this.priceOptions = data.data	
				} else if(data.value == 2){
					this.salesOptions = data.data	
				}else if(data.value == 3){
					this.totalOptions = data.data	
				}
				
				this.page = 1;
				this.list = [];
				this.getList()
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 500
				})
			},
			get_type_list2(){
				let that = this;
				this.$api.default.request('index/get_tag_class_tow', {
					pid: that.pid
				}, 'POST', false).then((res) => {
					let list = res.data
					let columnOptions = []
					list.forEach((item,index)=>{
						let obj ={
							title: item.name,
							key: 'type',
							default: '',
							tip: 'multi',
							list: []
						}
						
						item.list.forEach((ite,idx)=>{
							obj.list.push({
								text: ite.names,
								selected: false,
								value: ite.id
							})
						})
						
						columnOptions.push(obj)
					})
					
					this.columnOptions = columnOptions
					
					if(this.currentNew == 5){
						this.viewId = 'view5'
					}
					if(this.currentNew == 8){
						this.viewId = 'view6'
					}
				})
			},
			// 选择筛选条件
			handlerColumnChange(e,type) {
				console.log(e,111);
				if (e.cancel) {
					return
				};
				
				let list;
				if(type == 1){
					list = this.columnOptions
				}else if(type == 2){
					list = this.priceOptions
				} else if(type == 3){
					list = this.salesOptions
				}else if(type == 4){
					list = this.totalOptions
				}
				list.forEach((item,index) => {
					item.default = e.data[item.key];
					
					item.list.forEach((ite,idx)=>{
						if(e.data[idx] && ite.text == e.data[idx].text){
							ite.selected = true
						}
					})
				})
				
				
			},
			getListType() {
				let that = this;
				this.$api.default.request('user/get_goods_list_type', {}, 'POST', false).then((res) => {
					that.headList = res.data
					that.pid = that.current
					that.get_type_list2()
				})
			},
			getList() {
				this.loading = true
				let type_class = []
				this.columnOptions.forEach((item,index) => {
					
					item.list.forEach((ite,idx)=>{
						if(ite.selected){
							type_class.push(ite.value)
						}
					})
				})
				
				let tran_font_num = []
				this.priceOptions[0].list.forEach((item,index) => {
					if(item.selected){
						tran_font_num.push(item.value)
					}
				})
				
				let amount = []
				this.salesOptions[1].list.forEach((item,index) => {
					if(item.selected){
						amount.push(item.value)
					}
				})
				
				let word = "";
				this.salesOptions[0].list.forEach((item,index) => {
					if(item.selected){
						word = item.value;
					}
				})
				console.log(word,7777777);
				
				let currentType;
				this.totalOptions[0].list.forEach((item,index) => {
					if(item.selected){
						currentType = index == 0 ? 'asc' : 'desc'
					}
				})
				let order;
				this.totalOptions[1].list.forEach((item,index) => {
					if(item.selected){
						order = index
					}
				})
				
				let not_ids = []
				for(let i in this.goodList){
					not_ids.push(this.goodList[i].id)
				}
				
				this.$api.default.request('good/home_list3', {
					page: this.page,
					type: this.current,
					type_class: type_class.join(','),
					start_shooting: tran_font_num.join(','),
					price: amount.join(','),
					like: this.like,
					order: order,
					word:word,
					order_str: currentType,
					not_ids: this.page == 1 ? [] : not_ids
				}, 'POST', false).then((res) => {
					if (res.code) {
						this.list = res.data
						if (res.data.current_page > 1) {
							res.data.data.forEach((item) => {
								this.goodList.push(item)
							})
						} else {
							this.goodList = res.data.data
						}
						
						this.loading = false
					}
					
					this.totalPage = false
				})
			},
			changeItem(i) {
				this.currentNew = i
				this.current = i
				this.page = 1;
				this.list = [];
				this.getList();
				// 重新获取分类
				this.pid = this.headList[i].id
				this.get_type_list2()
			},
			getUserInfo(id) {

				this.$api.default.request('user/userInfo', {
					uid: id
				}, 'POST', false).then((res) => {
					if (res.code) {
						this.userInfo = res.user
						if (!res.user.is_writer) {
							this.navIndex = 3
						}
						this.middleShow = true
						// this.getList()
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			midClose() {
				this.middleShow = false
			},
			midOpen() {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.fix-top /deep/.uni-scroll-view-content{
		display: flex;
		align-items: center;
		padding: 5rpx;
		box-sizing: border-box;
	}
	.serbox {
		display: flex;
		align-items: center;
		background: #F8F8F8;
		border-radius: 142px;
		height: 72rpx;
		padding: 0 26.66rpx;
		// margin-bottom: 20rpx;
	
		.serpic {
			width: 32rpx;
			height: 32rpx;
			flex-shrink: 0;
		}
	
		.serput {
			padding: 0 16rpx;
			width: 500rpx;
			font-size: 28rpx;
			color: #333333;
		}
	}
	
	.fix-top {
		position: fixed;
		top: calc(var(--status-bar-height) + var(--window-top));
		padding-top: 50px;
		// top: 0;
		left: 0;
		width: 100%;
		z-index: 99;
		background-color: #fff;

		.serbox {
			display: flex;
			align-items: center;
			background: #F8F8F8;
			border-radius: 142px;
			height: 72rpx;
			padding: 0 26.66rpx;
			margin: 20rpx 30rpx;

			.serpic {
				width: 32rpx;
				height: 32rpx;
				flex-shrink: 0;
			}

			.serput {
				padding: 0 16rpx;
				width: 500rpx;
				font-size: 28rpx;
				color: #333333;
			}
		}
	}


	.content {
		padding: 20rpx 0;
		padding-top: 210rpx;

		.empytView {
			padding-top: 200rpx;
		}



		.head_list {
			display: flex;
			flex-direction: row;
			background: #FFFFFF;
			padding: 10rpx 30rpx;
			box-sizing:border-box;
			// display: -webkit-box;
			padding-bottom: 5rpx;
			width: 100%;

			.item {
				padding: 16rpx 24rpx;
				border-radius: 8rpx;
				box-shadow: 0px 0px 10rpx 0px rgba(70, 109, 103, 0.15);
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 20rpx;
				border: 4rpx solid rgba(255,255,255,0);

				image {
					width: 32rpx;
					height: 32rpx;
					object-fit: cover;
					border: 1rpx dotted #eee;
				}

				.text {
					white-space: nowrap;
					font-size: 20rpx;
					font-weight: 500;
					color: #3D3D3D;
					margin-top: 8rpx;
				}
			}

			.active {
				box-sizing: border-box;
				border: 4rpx solid #45C4B0;
			}
		}

		.result_list {
			padding: 20rpx 30rpx 24rpx;
			border-bottom: 20rpx solid #f2f2f2;

			.head {
				display: flex;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
					object-fit: cover;
				}

				.tit {
					font-size: 28rpx;
					font-weight: bold;
					color: #3D3D3D;
					margin: 0 10rpx;
				}

				.tips {
					font-size: 20rpx;
					color: #45C4B0;
					padding: 2rpx 8rpx;
					border-radius: 8rpx;
					background: rgba(69, 196, 176, 0.15);
				}
			}

			.wrap {
				margin-top: 28rpx;
				display: grid;
				grid-gap: 28rpx 24rpx;
				grid-template-columns: repeat(auto-fill, 300rpx);
				padding-bottom: 20rpx;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);

				.wrap_item {
					display: flex;
					align-items: center;
					font-size: 20rpx;
					color: #999999;

					image {
						width: 24rpx;
						height: 24rpx;
						object-fit: cover;
						margin-right: 4rpx;
					}
				}
			}

			.bottom {
				padding-top: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.user {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					color: #999999;
					
					.avatar {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						object-fit: cover;
						margin-right: 4rpx;
					}

					.jipic {
						width: 41px;
						height:19px;
						margin-left: 4px;
						margin-top: -5rpx;
					}

					.biepic {
						width: 41px;
						height:19px;
						margin-left: 4px;
						margin-top: -5rpx;
					}
					.onlines{
						font-size: 20rpx;
						.noline_str{
							color: #999;
							background: #999;
						}
						.lines{
							
							color: #45C4B0;
							background: #45C4B0;
						}
						position: relative;
						.online{
							color: #45C4B0;
						}
						
						
						.dian {
							width: 12rpx;
							height: 12rpx;
							border-radius: 50%;
							margin-left: 15rpx;
							margin-right: 5rpx;
						}
					}
				}

				.sub {
					border-radius: 24rpx;
					padding: 10rpx 32rpx;
					background: #45C4B0;
					font-size: 20rpx;
					font-weight: bold;
					color: #FFFFFF;
				}


			}
		}

		.baibox {
			background-color: #ffffff;
			width: 474rpx;
			border-radius: 8px;
			opacity: 1;
			padding: 100rpx 30rpx 40rpx;
			position: relative;

			.baihead {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				position: absolute;
				top: -80rpx;
				left: 50%;
				margin-left: -80rpx;
			}

			.nickname {
				font-size: 32rpx;
				padding-bottom: 8rpx;
				font-weight: bold;
				text-align: center;
				color: #3D3D3D;
			}

			.xutxt {
				font-size: 24rpx;
				text-align: center;
				color: #999999;
				padding-bottom: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 8rpx;
				}
			}

			.exhibit {
				display: grid;
				grid-gap: 16rpx 16rpx;
				justify-content: space-between;
				grid-template-columns: repeat(auto-fill, 218rpx);

				.item {
					width: 218rpx;
					height: 218rpx;
					background: rgba(216, 216, 216, 0.3);
					border: 4rpx;
					border-radius: 8rpx;

					image {
						width: 218rpx;
						height: 218rpx;
					}
				}
			}

			.gexu {
				padding-bottom: 20rpx;
				max-height: 450rpx;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				margin-bottom: 20rpx;

				.geli {
					display: flex;
					align-items: flex-start;
					padding-bottom: 20rpx;

					.getitle {
						font-size: 28rpx;
						font-weight: bold;
						letter-spacing: 0em;
						color: #3D3D3D;
						flex-shrink: 0;
					}

					
				}
			}
			
			.getxt {
				font-size: 26rpx;
				color: #999999;
				line-height: 35rpx;
			}

			.fabox {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 454rpx;
				height: 86rpx;
				border-radius: 8px;
				opacity: 1;
				background: #45C4B0;
				margin-top: 20rpx;

				.fapic {
					width: 40rpx;
					height: 40rpx;
				}

				.fatxt {
					font-size: 28rpx;
					font-weight: 500;
					padding-left: 14rpx;
					letter-spacing: 0em;
					color: #FFFFFF;
				}
			}

		}

		.closepic {
			width: 40rpx;
			height: 40rpx;
			margin: 40rpx auto 0;
		}
	}
</style>